<template>
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
      <!-- Content Header (Page header) -->
      <section class="content-header">
        <h1>
          客户服务管理
        </h1>

        <ol class="breadcrumb">
          <li><a href="#"> 控制台</a></li>
          <li class="active">创建客户服务</li>
        </ol>
      </section>

      <!-- Main content -->
      <section class="content">
          <div class="row">
            <div class="col-xs-12">
                <div class="box box-solid">
                  <div class="box-header with-border">
                    <h3 class="box-title">创建客户服务</h3>
                  </div>
                  <!-- /.box-header -->
                  <!-- form start -->
                  <form class="form-horizontal">
                    <div class="box-body">
                        <div class="row">
                            <div class="form-group col-sm-6">
                              <label class="col-sm-2 control-label">客户</label>
                              <div class="col-sm-10">
                                <input class="form-control" placeholder="20个字" v-model="model.custom_name" name="custom_name" v-validate="'required|max:20'">
                              </div>
                            </div>
                            <div class="form-group col-sm-6">
                                <label  class="col-sm-2 control-label">服务类型</label>
                                <div class="col-sm-10">
                                  <select class="form-control" v-model="model.service_type" name="service_type" v-validate="'required|min:1'">
                                      <option value="0">请选择</option>
                                      <option v-for="basedata in service_type_list" :value="basedata.id">{{basedata.value}}</option>
                                  </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col-sm-6">
                              <label class="col-sm-2 control-label">状态</label>
                              <div class="col-sm-10">
                                <p class="form-control no-border">{{$route.params.id > 0 ? '编辑' : '新建'}}</p>
                              </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="form-group col-sm-6">
                              <label  class="col-sm-2 control-label">服务内容</label>
                              <div class="col-sm-10">
                                  <textarea class="form-control" placeholder="客户对服务的明确要求说明" rows="5" name="content" v-model="model.content" v-validate="'required|max:150'"></textarea>
                              </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="form-group col-sm-6">
                              <label  class="col-sm-2 control-label">备注</label>
                              <div class="col-sm-10">
                                  <input class="form-control" v-model="model.remark" name="remark">
                              </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col-sm-6">
                              <label class="col-sm-2 control-label">创建人</label>
                              <div class="col-sm-10">
                                <input class="form-control" value="张三" readonly v-model="user.name">
                              </div>
                            </div>
                            <div class="form-group col-sm-6">
                                <label  class="col-sm-2 control-label">创建时间</label>
                                <div class="col-sm-10">
                                  <input class="form-control" readonly v-model="model.created_at">
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- /.box-body -->
                    <div class="box-footer">
                      <button type="button" class="btn btn-primary" @click="submit">保存</button>
                    </div>
                    <!-- /.box-footer -->
                  </form>
                </div>
              <!-- /.box -->
            </div>
          </div>
      </section>
      <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
</template>

<script>
import CustomService from '@/modules/CustomService'
import BaseData from '@/modules/BaseData'
import {mapState} from 'vuex'

export default {

    mounted() {
        this.loadModel();
    },

    data() {
        return {
            model:{},

            //服务类型
            service_type_list:[],
        };
    },

    methods: {
        loadModel() {
            if(this.$route.params.id > 0){
                CustomService.show(this.$route.params.id)
                .then((response) => {
                    this.model = response.contents;
                });
            }
            BaseData.list({cate_id:BaseData.SERVICE_TYPE},false)
            .then((response) => {
                this.service_type_list = response.contents;
            });
        },

        submit() {
            this.$validator.validateAll().then((result) => {
                if(!result){
                    return;
                }
                if(this.$route.params.id > 0){
                    CustomService.put(this.$route.params.id,this.model)
                    .then((response) => {
                        $.message('操作成功');
                        this.$router.push({name:'ServiceAssignIndex'});
                    })
                }else{

                    CustomService.store(this.model)
                    .then((response) => {
                        $.message('操作成功');
                        this.$router.push({name:'ContactIndex'});
                    });
                }
            });
        }
    },

    computed:{
        ...mapState(['user'])
    }
}
</script>
